import styled from 'styled-components'

const border = (WrapperedComp) => {
  const borderedComp = styled(WrapperedComp) `
    // 为边框位置提供定位参考
    position: relative;

    border-radius: ${props => props.radius || 0}rem;

    &::after {
      // 用以解决边框layer遮盖内容
      pointer-events: none;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;

      // fix当元素宽度出现小数时，边框可能显示不全的问题
      // overflow: hidden;

      content: '';
      border-color: ${props => props.color || '#ccc'};
      border-style: ${props => props.borderStyle || 'solid'};
      border-width: ${props => props.width || '1px'};

      // 适配dpr进行缩放
      @media screen and (-webkit-max-device-pixel-ratio: 1.49) {
        width: 100%;
        height: 100%;
        border-radius: ${props => props.radius || 0}rem;
      }

      @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
          width: 200%;
          height: 200%;
          transform scale(.5);
          border-radius: ${props => props.radius * 2 || 0}rem;
      }
      @media screen and (-webkit-min-device-pixel-ratio: 2.5) {
          width: 300%;
          height: 300%;
          transform scale(.33333)
          border-radius: ${props => props.radius * 3 || 0}rem;
      }
      transform-origin 0 0;
    }
  `

  return borderedComp
}

export default border